<template>
	<view class="function-list">
		<swiper class="function-swiper" :indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)"
			indicator-active-color="#D02B29">
			<swiper-item v-for="(page, pageIndex) in pages" :key="pageIndex">
				<view class="function-grid">
					<view class="function-item" v-for="(item, index) in page" :key="index" @click="handleFunctionClick(item)">
						<view class="function-icon" :style="{backgroundColor: item.bgColor}">
							<image :src="item.icon" mode="aspectFit"></image>
						</view>
						<text class="function-text">{{item.name}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟数据
const functionList = ref([
	{
		name: '扫码点餐',
		icon: '/static/icons/scan.svg',
		bgColor: '#D02B29',
		type: 'scan',
		url: '/pages/functions/scan'
	},
	{
		name: '预约排号',
		icon: '/static/icons/reserve.svg',
		bgColor: '#FF6B35',
		type: 'reserve',
		url: '/pages/functions/reserve'
	},
	{
		name: '外卖点餐',
		icon: '/static/icons/takeout.svg',
		bgColor: '#4CAF50',
		type: 'takeout',
		url: '/pages/functions/store-list'
	},
	{
		name: '领取优惠',
		icon: '/static/icons/coupon.svg',
		bgColor: '#FF9800',
		type: 'coupon',
		url: '/pages/functions/coupon'
	},
	{
		name: '会员中心',
		icon: '/static/icons/member.svg',
		bgColor: '#9C27B0',
		type: 'member',
		url: '/pages/member/index'
	},
	{
		name: '积分商城',
		icon: '/static/icons/points.svg',
		bgColor: '#2196F3',
		type: 'points',
		url: '/pages/functions/score_mall'
	},
	{
		name: '限时活动',
		icon: '/static/icons/activity.svg',
		bgColor: '#E91E63',
		type: 'activity',
		url: '/pages/activity/index'
	},
	{
		name: '门店查询',
		icon: '/static/icons/store.svg',
		bgColor: '#795548',
		type: 'store',
		url: '/pages/functions/store_list'
	},
	{
		name: '礼品卡',
		icon: '/static/icons/gift.svg',
		bgColor: '#009688',
		type: 'gift',
		url: '/pages/gift/index'
	},
	{
		name: '会员等级',
		icon: '/static/icons/vip.svg',
		bgColor: '#FFC107',
		type: 'vip',
		url: '/pages/member/level'
	},
	{
		name: '邀请好友',
		icon: '/static/icons/invite.svg',
		bgColor: '#3F51B5',
		type: 'invite',
		url: '/pages/invite/index'
	},
	{
		name: '餐桌预定',
		icon: '/static/icons/table.svg',
		bgColor: '#607D8B',
		type: 'table',
		url: '/pages/table/reserve'
	},
	{
		name: '意见反馈',
		icon: '/static/icons/feedback.svg',
		bgColor: '#FF5722',
		type: 'feedback',
		url: '/pages/feedback/index'
	},
	{
		name: '菜谱推荐',
		icon: '/static/icons/recipe.svg',
		bgColor: '#8BC34A',
		type: 'recipe',
		url: '/pages/functions/recipe'
	},
	{
		name: '我的钱包',
		icon: '/static/icons/wallet.svg',
		bgColor: '#673AB7',
		type: 'wallet',
		url: '/pages/wallet/index'
	},
	{
		name: '消费记录',
		icon: '/static/icons/history.svg',
		bgColor: '#00BCD4',
		type: 'history',
		url: '/pages/order/history'
	},
	{
		name: '趣味游戏',
		icon: '/static/icons/game.svg',
		bgColor: '#FF4081',
		type: 'game',
		url: '/pages/game/index'
	},
	{
		name: '幸运抽奖',
		icon: '/static/icons/lottery.svg',
		bgColor: '#7C4DFF',
		type: 'lottery',
		url: '/pages/lottery/index'
	},
	{
		name: '大转盘',
		icon: '/static/icons/wheel.svg',
		bgColor: '#FF6E40',
		type: 'wheel',
		url: '/pages/lottery/wheel'
	}
])

// 计算分页数据，每页8个功能
const pages = computed(() => {
	const result = []
	const pageSize = 8
	for (let i = 0; i < functionList.value.length; i += pageSize) {
		result.push(functionList.value.slice(i, i + pageSize))
	}
	return result
})

// 功能点击处理
const handleFunctionClick = (item) => {
	if (item.url) {
		uni.navigateTo({
			url: item.url
		})
	} else {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		})
	}
}
</script>

<style scoped>
.function-list {
	background-color: #fff;
	padding: 20rpx 0;
	margin: 20rpx 0;
}

.function-swiper {
	height: 360rpx;
}

.function-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
	padding: 20rpx;
}

.function-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.function-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
}

.function-icon image {
	width: 60rpx;
	height: 60rpx;
}

.function-text {
	font-size: 24rpx;
	color: #333;
}
</style> 